<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消费申报列表</title>

    <link rel="stylesheet" href="../../../bootstrap/css/bootstrap.css">
    <script src="../../../bootstrap/js/jquery-1.9.1.min.js"></script>
    <script src="../../../bootstrap/js/bootstrap.js"></script>
    <script src="../../../bootstrap/js/vue.js"></script>
    <script src="../../../bootstrap/js/axios.min.js"></script>

    <style>


 </style>


</head>
<body>

<div id="app">

    <div class="container" style="margin-top:60px">

        <a class="btn btn-primary" href="toAdd" >消费申报</a>

        <table class="table table-striped" style="margin-top:10px;" >
            <thead >
                <tr>
                    <th scope="col">项目</th>
                    <th scope="col">日期</th>
                    <th scope="col">金额</th>
                    <th scope="col">状态</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="expenditure in expenditureList">
                    <td>{{expenditure.projectName}}</td>
                    <td>{{expenditure.createTime | formatDate}}</td>
                    <td>{{expenditure.price}}</td>
                    <td v-if="expenditure.status==0" style="color:blue" @click="edit(expenditure.id)">提交成功</td>
                    <td v-if="expenditure.status==1" style="color:red" @click="edit(expenditure.id)">驳回请求</td>
                    <td v-if="expenditure.status==2" style="color:deepskyblue">审核通过</td>
                </tr>

            </tbody>
        </table>
        <div style="float:right">
            共有{{sumPageSize}}页；
            当前为{{currentPage}}页；
            <button type="button" class="btn btn-light" @click="changePage(-1)">上一页</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button type="button" class="btn btn-light" @click="changePage(1)">下一页</button>
        </div>

    </div>
</div>
</body>
</html>

<script>
    new Vue({
        el:"#app",
        data:{
            expenditureList: [],
            currentPage:1,
            pageSize:20,
            total: 0,
            sumPageSize: 0
        },
        created:function (){
            this.selectList()
        },
        methods:{
            getAuthorize:function (){
                axios.get(
                    "/staff/employee/authorize"
                ).then(response=>{
                    setTimeout(() => {
                        this.selectList()
                    },300)
                })
            },
            selectList:function () {
                axios.get(
                    "/staff/reimbursement/getList/"+this.currentPage+"/"+this.pageSize
                ).then(response=>{
                    this.expenditureList = response.data.list
                    this.total = response.data.total
                    this.sumPageSize = Math.ceil(this.total / this.pageSize)
                })
            },
            edit:function (id){
                window.location.href="/staff/reimbursement/toAdd?id="+id
            },
            changePage:function (page){
                this.currentPage = this.currentPage + page
                if(this.currentPage<=1){
                    this.currentPage = 1
                }
                if(this.currentPage>=this.sumPageSize){
                    this.currentPage = this.sumPageSize
                }
                this.selectList()
            }
        },
        filters: {
            formatDate(value) {
                let date = new Date(value)
                return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
            }
        }
    });
</script>

